﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=1024, height=768" />
    <title>Air Sanity</title>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    <!-- BingMaps JavaScript Control references -->
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
    <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapiModules.js"></script>
    <!-- BingMaps-JavaScript-SDK references -->
    <link href="/css/default.css" rel="stylesheet">
     <script src="/js/air.js"></script>
    <script type="text/javascript"  src="/js/default.js"></script>
    <!-- Use script tag to register custom module, this should be done before adding the custom module js reference -->
    <script>Microsoft.Maps.registerModule('clusterModule');</script>
    <script type="text/javascript" src="js/V7ClientSideClustering.js"></script>

</head>
<body style="background:#089908;">
    <div id="right-container">


         <div id="C9ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
    <div class="listItemTemplate">
        <div class="listItemTitle">Cautionary: 
            <span data-win-bind="innerText: Cautionary"></span><br />
           Health: 
            <span data-win-bind="innerText: Health"></span><br />
            Others:
            <span data-win-bind="innerText: TextSensitive"></span><br />
            <b>Category: </b>
            <span data-win-bind="innerText: category"></span>
        </div>
           <div class="listItemImage">
            <img data-win-bind="src: img" width="80" />
        </div>
    </div>
    </div>

      <div id="C9ItemTemplate1" data-win-control="WinJS.Binding.Template" style="display: none;">
    <div class="listItemTemplate">
        <div class="listItemTitle">Cautionary: 
            <span data-win-bind="innerText: Cautionary"></span><br />
           Health: 
            <span data-win-bind="innerText: Health"></span><br />
            Others:
            <span data-win-bind="innerText: TextSensitive"></span>
            <b>Category: </b>
            <span data-win-bind="innerText: category"></span>
        </div>
        <div class="listItemImage">
            <img class="imageList" data-win-bind="src: img" />
        </div>

    </div>
    </div>

    <h2>CO Based Recomendations</h2>
   <div id="articlelist" data-win-control="WinJS.UI.ListView" 
     data-win-options="{ itemDataSource: C9Data.ItemList.dataSource, itemTemplate: C9ItemTemplate }"> 
></div> 

    <h2>NO2 Based Recommendations</h2>
   
    <div id="articlelist1" data-win-control="WinJS.UI.ListView" 
      data-win-options="{ itemDataSource: C9Data.ItemList.dataSource, itemTemplate: C9ItemTemplate }"></div> 



    </div>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment groupeditemspage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <img src="images/air_logo.jpg"  />
        </header>
        <section aria-label="Main content" role="main">
            <div class="groupeditemslist" aria-label="List of groups"><div style="width:500px;height:500px;" id="mapdiv"> </div></div>
        </section>
    </div>
   
</body>
</html>
